<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/assets/libs/iview/iview.css}">
    <link rel="stylesheet" th:href="@{/assets/libs/layer/skin/default/layer.css}">
    <script th:src="@{/assets/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/assets/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/assets/libs/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/assets/libs/iview/iview.min.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak >

    <div class="layui-card">
        <div class="layui-card-header">
            <h2 class="header-title">任务管理</h2>
            <span class="layui-breadcrumb pull-right">
                <a href="#!home_console">首页</a>
                <a><cite>任务管理</cite></a>
            </span>
        </div>
        <div class="layui-card-body">
            <div style="margin-bottom: 6px;margin: 30px">
                <i-input v-model="content" placeholder="任务名称"  style="width: 300px"></i-input>
                <i-button type="primary" @click="search()" icon="ios-search">搜索</i-button>
                <i-button type="primary" @click="empty()" icon="ios-close-empty">清空</i-button>
                <i-button type="info" style="float: right;" @click="add()" icon="person-add">新增</i-button>
            </div>
            <div style="margin-bottom: 6px;margin: 30px">
                <template>
                    <i-table border :content="self" :columns="tableTitle" :data="JobData"></i-table>
                    <br>
                    <!-- 待实现分页功能 -->
                    <!-- <Page :current="teacher.pageNumber" :total="tableSize" :page-size="pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page> -->
                </template>
            </div>
        </div>
    </div>
</div>

<script>
    dialogOpen = function(opt){
        var defaults = {
            id : 'layerForm',
            title : '',
            width: '',
            height: '',
            url : null,
            scroll : false,
            data : {},
            btn: ['确定', '取消'],
            success: function(){},
            yes: function(){}
        }
        var option = $.extend({}, defaults, opt), content = null;
        if(option.scroll){
            content = [option.url]
        }else{
            content = [option.url, 'no']
        }
        top.layer.open({
            type : 2,
            id : option.id,
            title : option.title,
            closeBtn : 1,
            anim: -1,
            isOutAnim: false,
            shadeClose : false,
            shade : 0.3,
            area : [option.width, option.height],
            content : content,
            btn: option.btn,
            success: function(){
                option.success(option.id);
            },
            yes: function(){
                option.yes(option.id);
            }
        });
    }
</script>

<script type="text/javascript">
    var vm = new Vue({
        el : '#app',
        data : {
            content : '',
            pageNo : 0,
            pageSize : 100,
            jobName : "",
            JobData : [],
            tableTitle:[ {
                key : "jobName",
                title : "任务名称"
            }, {
                key : "jobGroup",
                title : "任务分组"
            }, {
                key : "description",
                title : "描述"
            }, {
                key : "jobClassName",
                title : "执行类"
            }, {
                key : "cronExpression",
                title : "执行时间"
            }, {
                title : '操作',
                key : 'action',
                width : 300,
                align : 'left',
                render : function(h, params) {
                    var functionList = [];
                    //执行
                    var trigger = h('Button', {
                        props : {
                            type : 'primary',
                            size : 'small',
                            icon : 'arrow-swap'
                        },
                        style : {
                            marginRight : '8px'
                        },
                        on : {
                            click : function() {
                                vm.trigger(params.row.jobName,params.row.jobGroup);
                            }
                        }
                    }, '执行');
                    functionList.push(trigger);
                    //修改
                    var edit = h('Button', {
                        props : {
                            type : 'primary',
                            size : 'small',
                            icon : 'edit'
                        },
                        style : {
                            marginRight : '8px'
                        },
                        on : {
                            click : function() {
                                vm.edit(params.row);
                            }
                        }
                    }, '修改');
                    functionList.push(edit);
                    //移除
                    var remove = h('Button', {
                        props : {
                            type : 'primary',
                            size : 'small',
                            icon : 'close'
                        },
                        style : {
                            marginRight : '8px'
                        },
                        on : {
                            click : function() {
                                vm.remove(params.row.jobName,params.row.jobGroup);
                            }
                        }
                    }, '移除');
                    functionList.push(remove);
                    if(params.row.triggerState=="PAUSED"){
                        //恢复
                        var resume = h('Button', {
                            props : {
                                type : 'primary',
                                size : 'small',
                                icon : 'ios-reload'
                            },
                            style : {
                                marginRight : '8px'
                            },
                            on : {
                                click : function() {
                                    vm.resume(params.row.jobName,params.row.jobGroup);
                                }
                            }
                        }, '恢复');
                        functionList.push(resume);
                    }else{
                        //停止
                        var pause = h('Button', {
                            props : {
                                type : 'primary',
                                size : 'small',
                                icon : 'ios-pause'
                            },
                            style : {
                                marginRight : '8px'
                            },
                            on : {
                                click : function() {
                                    vm.pause(params.row.jobName,params.row.jobGroup);
                                }
                            }
                        }, '停止');
                        functionList.push(pause);
                    }
                    // 返回方法集合
                    return h('div', functionList);
                }
            }]

        },
        methods : {
            //搜索
            search : function(){
                $.ajax({
                    url:"quartz/job/list",
                    type:"post",
                    data:{'jobName':this.content,"pageNo":this.pageNo,'pageSize':this.pageSize},
                    success: function(result) {
                        vm.JobData = result.data;
                    }
                });
            },
            empty : function(){
                vm.content = '';
                this.list();
            },
            //任务列表(自行实现分页)
            list : function() {
                $.ajax({
                    url:"quartz/job/list",
                    type:"post",
                    data:{'time':(new Date()).toString(),"pageNo":this.pageNo,'pageSize':this.pageSize},
                    success: function(result) {
                        vm.JobData = result.data;
                    }
                });
            },
            //触发任务
            trigger : function(jobName,jobGroup){
                $.ajax({
                    url:"quartz/job/trigger",
                    type:"post",
                    data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
                    success: function(result) {
                        if(result.code=="200"){
                            vm.$Notice.success({
                                desc:  "触发任务成功"
                            });
                        } else {
                            vm.$Notice.success({
                                desc:  result.msg
                            });
                        }
                    }
                });
            },
            //停止任务
            pause : function(jobName,jobGroup){
                $.ajax({
                    url:"quartz/job/pause",
                    type:"post",
                    data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
                    success: function(result) {
                        if(result.code=="200"){
                            vm.$Notice.success({
                                desc:  '停止任务成功'
                            });
                            vm.list();
                        } else {
                            vm.$Notice.success({
                                desc:  result.msg
                            });
                        }
                    }
                });
            },
            //恢复任务
            resume : function(jobName,jobGroup){
                $.ajax({
                    url:"quartz/job/resume",
                    type:"post",
                    data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
                    success: function(result) {
                        if(result.code=="200"){
                            vm.$Notice.success({
                                desc:  '恢复任务成功'
                            });
                            vm.list();
                        } else {
                            vm.$Notice.success({
                                desc:  result.msg
                            });
                        }
                    }
                });
            },
            //新建任务(略简单)
            add : function(){
                dialogOpen({
                    title: '新增',
                    url: 'quartz/job/addView',
                    //屏幕小 滚动条显示
                    scroll : true,
                    width: '450px',
                    height: '450px',
                    yes : function(iframeId) {
                        top.frames[iframeId].vm.acceptClick();
                    },
                });
            },
            edit : function(quartz){
                dialogOpen({
                    title: '修改',
                    url: 'quartz/job/addView',
                    //屏幕小 滚动条显示
                    scroll : true,
                    width: '450px',
                    height: '450px',
                    success : function(iframeId){
                        top.frames[iframeId].vm.formQuartz = quartz;
                    },
                    yes : function(iframeId) {
                        top.frames[iframeId].vm.acceptClick();
                    },
                });
            },
            //移除任务
            remove : function(jobName,jobGroup){
                var that = this;
                top.layer.confirm('确定要移除任务吗？', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $.ajax({
                        url:"quartz/job/remove",
                        type:"post",
                        data:{'time':(new Date()).toString(),"jobName":jobName,'jobGroup':jobGroup},
                        success: function(result) {
                            if(result.code=="200"){
                                top.layer.msg('任务移除成功', {icon: 1});
                                window.setTimeout(that.list(),1500);
                            } else {
                                vm.$Notice.success({
                                    desc:  result.msg
                                });
                            }
                        }
                    });
                }, function(){

                });
            }
        },
        created : function() {
            this.list();
        }
    })

</script>
</body>
</html>
